<script setup>
import Header from '@/components/header/App.vue'
import Breadcrumb from '@/components/breadcrumb/App.vue'
import Footer from '@/components/footer/App.vue'
</script>

<template>
  <Header></Header>
  <div class="details">
    <Breadcrumb first-bread="服务能力" last-bread="信用服务"></Breadcrumb>

    <h1 class="page-title">信用服务</h1>

    <p class="page-subtitle">专业信用评估与管理服务，助力企业建立良好信用形象，提升市场竞争力</p>


    <div class="intro-section">
      <div class="intro-content">
        <div class="intro-text">
          <h2>信用服务概述</h2>
          <p>在市场经济中，信用是企业最宝贵的无形资产之一。我们的信用服务团队由资深信用管理专家组成，拥有丰富的行业经验和成功案例。我们采用科学的信用评估模型，结合大数据分析技术，为企业提供全方位的信用服务。</p>
          <p>服务内容包括企业信用评估、信用报告、信用监测、信用修复和信用管理等。我们已为超过1000家企业提供了专业信用服务，帮助客户提升信用等级，降低融资成本，增强市场竞争力。</p>
          <p>我们的信用评估体系已获得多家金融机构和行业协会的认可，评估结果可作为企业融资、投标和市场拓展的重要参考依据。</p>
        </div>
        <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="信用服务" class="intro-image">
      </div>
    </div>


    <div class="services-section">
      <h2 class="section-title">服务内容</h2>
      <p>全方位的信用服务，满足企业不同阶段的信用需求</p>

      <div class="services-grid">
        <!-- 信用评估 -->
        <div class="service-card">
          <div class="service-icon">📊</div>
          <h3>企业信用评估</h3>
          <p>基于企业财务数据、经营状况、行业地位等多维度信息，提供专业信用评级服务，全面反映企业信用状况。</p>
          <a href="javascript:;">了解详情</a>
        </div>

        <!-- 信用报告 -->
        <div class="service-card">
          <div class="service-icon">📝</div>
          <h3>信用报告服务</h3>
          <p>提供标准版和定制版企业信用报告，包含企业基本信息、财务数据、信用评级、风险提示等内容。</p>
          <a href="javascript:;">了解详情</a>
        </div>

        <!-- 信用监测 -->
        <div class="service-card">
          <div class="service-icon">🔍</div>
          <h3>信用监测预警</h3>
          <p>实时监测企业信用状况变化，及时发现潜在风险，提供预警服务，帮助企业防范信用风险。</p>
          <a href="javascript:;">了解详情</a>
        </div>

        <!-- 信用修复 -->
        <div class="service-card">
          <div class="service-icon">🔄</div>
          <h3>信用修复服务</h3>
          <p>针对存在信用问题的企业，提供专业的信用修复方案，帮助企业改善信用状况，重建市场信任。</p>
          <a href="javascript:;">了解详情</a>
        </div>

        <!-- 信用管理 -->
        <div class="service-card">
          <div class="service-icon">📈</div>
          <h3>信用管理咨询</h3>
          <p>提供信用管理体系建设、信用政策制定、应收账款管理等咨询服务，提升企业信用管理水平。</p>
          <a href="javascript:;">了解详情</a>
        </div>

        <!-- 信用培训 -->
        <div class="service-card">
          <div class="service-icon">🎓</div>
          <h3>信用管理培训</h3>
          <p>开展信用管理专业培训，提升企业员工信用风险意识和信用管理能力，培养专业信用管理人才。</p>
          <a href="javascript:;">了解详情</a>
        </div>
      </div>
    </div>

    <div class="process-section">
      <h2 class="section-title">信用评估流程</h2>
      <p>科学严谨的评估流程，确保信用评估结果的客观公正</p>

      <div class="process-steps">
        <div class="step">
          <div class="step-number">1</div>
          <div class="step-title">资料收集</div>
          <div class="step-desc">收集企业基本信息、财务数据、经营状况等资料</div>
        </div>

        <div class="step">
          <div class="step-number">2</div>
          <div class="step-title">实地考察</div>
          <div class="step-desc">对企业进行实地考察，核实资料真实性</div>
        </div>

        <div class="step">
          <div class="step-number">3</div>
          <div class="step-title">数据分析</div>
          <div class="step-desc">运用信用评估模型对数据进行分析</div>
        </div>

        <div class="step">
          <div class="step-number">4</div>
          <div class="step-title">初步评级</div>
          <div class="step-desc">形成初步信用评级结果</div>
        </div>

        <div class="step">
          <div class="step-number">5</div>
          <div class="step-title">报告发布</div>
          <div class="step-desc">出具正式信用评估报告</div>
        </div>
      </div>
    </div>


    <div class="value-section">
      <h3 class="value-title">良好信用的价值</h3>

      <div class="value-grid">
        <div class="value-item">
          <div class="value-icon">💰</div>
          <h3>降低融资成本</h3>
          <p>良好信用可帮助企业获得更低利率的融资，降低资金成本</p>
        </div>

        <div class="value-item">
          <div class="value-icon">🤝</div>
          <h3>增强商业合作</h3>
          <p>提升合作伙伴信任度，拓展商业机会</p>
        </div>

        <div class="value-item">
          <div class="value-icon">📈</div>
          <h3>提升市场竞争力</h3>
          <p>在招投标、政府采购等场景中获得优势</p>
        </div>

        <div class="value-item">
          <div class="value-icon">🛡️</div>
          <h3>防范信用风险</h3>
          <p>及时发现和解决信用问题，避免重大损失</p>
        </div>
      </div>
    </div>


    <div class="cases-section">
      <h2 class="section-title">成功案例</h2>
      <p>我们已为众多企业提供了专业的信用服务</p>

      <div class="case-list">
        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="制造企业" class="case-image">
          <div class="case-content">
            <h4>某制造企业信用修复</h4>
            <p>帮助该企业修复信用问题，6个月内信用评级提升2个等级，成功获得银行贷款。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>

        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="科技企业" class="case-image">
          <div class="case-content">
            <h4>科技企业信用评估</h4>
            <p>为该科技企业提供信用评估服务，评估结果助力企业获得风险投资。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>

        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="贸易公司" class="case-image">
          <div class="case-content">
            <h4>贸易公司信用管理</h4>
            <p>帮助贸易公司建立信用管理体系，应收账款逾期率下降60%。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>
      </div>
    </div>


    <Footer></Footer>
  </div>
</template>

<style scoped>
.details{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 页面标题 */
.page-title {
  font-size: 32px;
  text-align: center;
  margin: 40px 0;
  color: #1e5799;
  position: relative;
  padding-bottom: 20px;
}

.page-title:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: #207cca;
}

.page-subtitle {
  text-align: center;
  font-size: 18px;
  color: #666;
  max-width: 800px;
  margin: 0 auto 50px;
  line-height: 1.8;
}

/* 信用服务介绍 */
.intro-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.intro-content {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.intro-text {
  flex: 1;
}

.intro-text h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #1e5799;
}

.intro-text p {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

.intro-image {
  width: 500px;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  margin-left: 40px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* 服务内容 */
.services-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 24px;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
  color: #1e5799;
  position: relative;
}

.section-title:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 80px;
  height: 2px;
  background: #207cca;
}

/* 服务网格 */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.service-card {
  background-color: #f9fbff;
  border-radius: 8px;
  padding: 30px;
  border: 1px solid #e0e9ff;
  transition: transform 0.3s, box-shadow 0.3s;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(30, 87, 153, 0.1);
  background-color: white;
}

.service-icon {
  font-size: 48px;
  color: #207cca;
  margin-bottom: 20px;
}

.service-card h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #1e5799;
}

.service-card p {
  color: #666;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.service-card a {
  display: inline-block;
  background-color: #1e5799;
  color: white;
  padding: 8px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s;
}

.service-card a:hover {
  background-color: #207cca;
}

/* 信用评估流程 */
.process-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.process-steps {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  position: relative;
}

.process-steps:before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, #207cca, #1e5799);
  z-index: 1;
}

.step {
  text-align: center;
  position: relative;
  z-index: 2;
  width: 20%;
}

.step-number {
  width: 60px;
  height: 60px;
  background-color: #207cca;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  margin: 0 auto 15px;
  box-shadow: 0 5px 15px rgba(30, 87, 153, 0.3);
}

.step-title {
  font-size: 16px;
  font-weight: bold;
  color: #1e5799;
  margin-bottom: 10px;
}

.step-desc {
  font-size: 14px;
  color: #666;
}

/* 信用价值 */
.value-section {
  background: linear-gradient(135deg, #1e5799 0%, #207cca 100%);
  border-radius: 8px;
  padding: 60px 40px;
  margin-bottom: 40px;
  color: white;
}

.value-title {
  font-size: 28px;
  text-align: center;
  margin-bottom: 40px;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
}

.value-item {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  transition: transform 0.3s;
}

.value-item:hover {
  transform: translateY(-5px);
  background-color: rgba(255, 255, 255, 0.2);
}

.value-icon {
  font-size: 40px;
  margin-bottom: 20px;
}

.value-item h3 {
  font-size: 20px;
  margin-bottom: 15px;
}

.value-item p {
  font-size: 14px;
  opacity: 0.9;
}

/* 案例展示 */
.cases-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.case-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.case-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.case-card:hover {
  transform: translateY(-5px);
}

.case-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.case-content {
  padding: 20px;
  background-color: white;
}

.case-content h4 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #1e5799;
}

.case-content p {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
}

.case-content a {
  display: inline-block;
  color: #207cca;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}

</style>